<template>
	<view class="factory-certification-page">
    <TopBar
        left-icon="/static/user.png"
        scan-icon="/static/saoyisao.png"
        menu-icon="/static/menu.png"
        @menu="toggleMenu"
    />

        <scroll-view scroll-y class="form-scroll">
            <view class="back-row" @click="goBack">
                <image class="back-arrow-icon" src="/static/left.png" mode="aspectFit"></image>
            </view>
			<view class="header">
				<text class="title">Factory Profile</text>
				<text class="subtitle">Section 2. Certification Information</text>
			</view>

            <!-- Environment & Sustainability -->
            <view class="cert-section">
                <text class="section-title environment">Environment & Sustainability</text>
                <view class="filter-buttons">
                    <view class="filter-btn" :class="{ active: activeFilter === 'mandatory' }" @click="setActiveFilter('mandatory')">
                        <text class="filter-text" :class="{ active: activeFilter === 'mandatory' }">Mandatory</text>
                    </view>
                    <view class="filter-btn" :class="{ active: activeFilter === 'required' }" @click="setActiveFilter('required')">
                        <text class="filter-text" :class="{ active: activeFilter === 'required' }">Required</text>
                    </view>
                    <view class="filter-btn" :class="{ active: activeFilter === 'value-add' }" @click="setActiveFilter('value-add')">
                        <text class="filter-text" :class="{ active: activeFilter === 'value-add' }">Value-Add</text>
                    </view>
                </view>
                 <view v-if="getCurrentItems('environment').filter(item => item.hasIcon).length > 0">
                     <view class="content-section" v-for="item in getCurrentItems('environment').filter(item => item.hasIcon)" :key="item.id" @click="toggleCertItem('environment', item.id)">
                         <view class="cert-item">
                             <view class="checkbox" :class="{ checked: item.checked }">
                                 <text class="checkmark" v-if="item.checked">✓</text>
                             </view>
                             <text class="cert-text">{{ item.name }}</text>
                             <image class="paperclip-icon" src="/static/paperclip.png" mode="aspectFit"></image>
                         </view>
                     </view>
                 </view>
                 <view class="simple-item" v-for="item in getCurrentItems('environment').filter(item => !item.hasIcon)" :key="item.id" @click="toggleCertItem('environment', item.id)" :class="{ 'gray-item': item.isGray }">
                     <view class="checkbox" :class="{ checked: item.checked }">
                         <text class="checkmark" v-if="item.checked">✓</text>
                     </view>
                     <text class="cert-text">{{ item.name }}</text>
                 </view>
            </view>

            <!-- Social Responsibility -->
            <view class="cert-section">
                <text class="section-title social">Social Responsibility</text>
                <view class="filter-buttons">
                    <view class="filter-btn" :class="{ active: activeFilter === 'mandatory' }" @click="setActiveFilter('mandatory')">
                        <text class="filter-text" :class="{ active: activeFilter === 'mandatory' }">Mandatory</text>
                    </view>
                    <view class="filter-btn" :class="{ active: activeFilter === 'required' }" @click="setActiveFilter('required')">
                        <text class="filter-text" :class="{ active: activeFilter === 'required' }">Required</text>
                    </view>
                    <view class="filter-btn" :class="{ active: activeFilter === 'value-add' }" @click="setActiveFilter('value-add')">
                        <text class="filter-text" :class="{ active: activeFilter === 'value-add' }">Value-Add</text>
                    </view>
                </view>
                 <view v-if="getCurrentItems('social').length > 0">
                     <view class="content-section" v-for="item in getCurrentItems('social')" :key="item.id" @click="toggleCertItem('social', item.id)">
                         <view class="cert-item">
                             <view class="checkbox" :class="{ checked: item.checked }">
                                 <text class="checkmark" v-if="item.checked">✓</text>
                             </view>
                             <text class="cert-text">{{ item.name }}</text>
                             <image v-if="item.hasIcon" class="paperclip-icon" src="/static/paperclip.png" mode="aspectFit"></image>
                         </view>
                     </view>
                 </view>
            </view>

            <!-- Safety & Regulatory -->
            <view class="cert-section">
                <text class="section-title safety">Safety & Regulatory</text>
                <view class="filter-buttons">
                    <view class="filter-btn" :class="{ active: activeFilter === 'mandatory' }" @click="setActiveFilter('mandatory')">
                        <text class="filter-text" :class="{ active: activeFilter === 'mandatory' }">Mandatory</text>
                    </view>
                    <view class="filter-btn" :class="{ active: activeFilter === 'required' }" @click="setActiveFilter('required')">
                        <text class="filter-text" :class="{ active: activeFilter === 'required' }">Required</text>
                    </view>
                    <view class="filter-btn" :class="{ active: activeFilter === 'value-add' }" @click="setActiveFilter('value-add')">
                        <text class="filter-text" :class="{ active: activeFilter === 'value-add' }">Value-Add</text>
                    </view>
                </view>
                 <view v-if="getCurrentItems('safety').length > 0">
                     <view class="content-section" v-for="item in getCurrentItems('safety')" :key="item.id" @click="toggleCertItem('safety', item.id)">
                         <view class="cert-item">
                             <view class="checkbox" :class="{ checked: item.checked }">
                                 <text class="checkmark" v-if="item.checked">✓</text>
                             </view>
                             <text class="cert-text">{{ item.name }}</text>
                             <image v-if="item.hasIcon" class="paperclip-icon" src="/static/paperclip.png" mode="aspectFit"></image>
                         </view>
                     </view>
                 </view>
            </view>

            <!-- Quality & Performance -->
            <view class="cert-section">
                <text class="section-title quality">Quality & Performance</text>
                <view class="filter-buttons" v-if="activeFilter !== 'value-add'">
                    <view class="filter-btn" :class="{ active: activeFilter === 'mandatory' }" @click="setActiveFilter('mandatory')">
                        <text class="filter-text" :class="{ active: activeFilter === 'mandatory' }">Mandatory</text>
                    </view>
                    <view class="filter-btn" :class="{ active: activeFilter === 'required' }" @click="setActiveFilter('required')">
                        <text class="filter-text" :class="{ active: activeFilter === 'required' }">Required</text>
                    </view>
                    <view class="filter-btn" :class="{ active: activeFilter === 'value-add' }" @click="setActiveFilter('value-add')">
                        <text class="filter-text" :class="{ active: activeFilter === 'value-add' }">Value-Add</text>
                    </view>
                </view>
                 <view v-if="getCurrentItems('quality').length > 0">
                     <view class="content-section" v-for="item in getCurrentItems('quality')" :key="item.id" @click="toggleCertItem('quality', item.id)">
                         <view class="cert-item">
                             <view class="checkbox" :class="{ checked: item.checked }">
                                 <text class="checkmark" v-if="item.checked">✓</text>
                             </view>
                             <text class="cert-text">{{ item.name }}</text>
                             <image v-if="item.hasIcon" class="paperclip-icon" src="/static/paperclip.png" mode="aspectFit"></image>
                         </view>
                     </view>
                 </view>
            </view>

			<button class="next-btn" @click="goToSustainability">Next</button>
        </scroll-view>

        <AccountMenu
            v-if="showMenu"
            :style="{ '--anchor-top': '70px' }"
            @close="showMenu = false"
            @select="() => showMenu = false"
        />
	</view>
</template>

<script setup>
import TopBar from '@/components/TopBar.vue';
import AccountMenu from '@/components/AccountMenu.vue';
import { ref } from 'vue';

const goBack = () => {
    uni.navigateTo({
        url: '/pages/person/person'
    });
};
const goToSustainability = () => {
    uni.navigateTo({ url: '/pages/factory/factory-sustainability' });
};
const showMenu = ref(false);
const toggleMenu = () => { showMenu.value = !showMenu.value; };

// 当前激活的筛选器
const activeFilter = ref('mandatory');

// 认证数据
const certificationData = ref({
    environment: {
        mandatory: [
            { id: 1, name: 'CFP report', checked: false, hasIcon: true },
            { id: 2, name: 'Provide data for Climate calculation', checked: false, hasIcon: false, isGray: true }
        ],
        required: [
            { id: 3, name: 'ISO 14001', checked: false, hasIcon: true },
            { id: 4, name: 'Bluesign®', checked: false, hasIcon: true }
        ],
        "value-add": [
            { id: 5, name: 'GRS / RCS', checked: false, hasIcon: true },
            { id: 6, name: 'GOTS / OCS', checked: false, hasIcon: true },
            { id: 7, name: 'ISO 50001', checked: false, hasIcon: true }
        ]
    },
    social: {
        mandatory: [],
        required: [
            { id: 9, name: 'BSCI', checked: false, hasIcon: true }
        ],
        "value-add": [
            { id: 11, name: 'SA8000', checked: false, hasIcon: true },
            { id: 12, name: 'ISO 45001', checked: false, hasIcon: true },
            { id: 13, name: 'Fair Trade Textile Standard', checked: false, hasIcon: true }
        ]
    },
    safety: {
        mandatory: [
            { id: 13, name: 'REACH (EU)', checked: false, hasIcon: true }
        ],
        required: [
            { id: 15, name: 'OEKO-TEX® Standard 100', checked: false, hasIcon: true }
        ],
        "value-add": [
            { id: 17, name: 'ISO 17025', checked: false, hasIcon: true },
            { id: 18, name: 'CPSIA (US)', checked: false, hasIcon: true },
            { id: 19, name: 'JIS (Japan)', checked: false, hasIcon: true }
        ]
    },
    quality: {
        mandatory: [],
        required: [
            { id: 21, name: 'ISO 9001', checked: false, hasIcon: true },
            { id: 22, name: 'EN / ISO Performance Standards', checked: false, hasIcon: true }
        ],
        "value-add": [
            { id: 23, name: 'ASTM (US)', checked: false, hasIcon: true },
            { id: 24, name: 'AATCC (US)', checked: false, hasIcon: true }
        ]
    }
});

// 设置激活的筛选器
const setActiveFilter = (filter) => {
    activeFilter.value = filter;
};

// 获取当前筛选器下的项目
const getCurrentItems = (category) => {
    return certificationData.value[category][activeFilter.value] || [];
};

// 切换认证项目状态
const toggleCertItem = (category, itemId) => {
    const items = certificationData.value[category][activeFilter.value];
    const item = items.find(item => item.id === itemId);
    if (item) {
        item.checked = !item.checked;
    }
};
</script>

<style lang="scss">
.factory-certification-page { min-height: 100vh; background: linear-gradient(180deg, #d9f0ff 0%, #e9f9ed 100%); }
.form-scroll { margin-top: 60px; padding: 0 16px 80px 16px; box-sizing: border-box; }
.back-row { margin: 12px 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.back-arrow-icon { width: 32px; height: 32px; }
.header { margin-bottom: 8px; margin-left: 6px; }
.title { font-size: 22px; font-weight: 800; color: #0b1e2a; }
.subtitle { display: block; margin-top: 6px; color: #3b5560; font-size: 14px; }

.cert-section { 
    margin-bottom: 24px; 
}
.section-title { 
    font-size: 18px; 
    font-weight: 600; 
    margin: 16px 0 16px 6px; 
    display: block; 
}
.section-title.environment { color: #28a745; }
.section-title.social { color: #007bff; }
.section-title.safety { color: #dc3545; }
.section-title.quality { color: #000; }

.filter-buttons {
    display: flex;
    gap: 8px;
    margin-bottom: 0;
    margin-top: 12px;
    margin-left: 6px;
    position: relative;
    z-index: 1;
}
.filter-btn {
    padding: 8px 16px;
    border-radius: 12px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
}
.filter-btn.active {
    background: #333;
    border-color: #333;
}
.filter-text {
    font-size: 12px;
    color: #000;
    font-weight: 500;
}
.filter-text.active {
    color: #fff;
}

.content-section {
    background: #fff;
    border-radius: 8px;
    padding: 0 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    margin-top: -8px;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}
.cert-item {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding: 4px 0;
}
.cert-item:last-child {
    margin-bottom: 0;
}
.checkbox { 
    width: 16px; 
    height: 16px; 
    border: 2px solid #ccc; 
    border-radius: 3px; 
    margin-right: 12px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: #fff; 
}
.checkbox.checked { 
    background: #333; 
    border-color: #333; 
}
.checkmark { 
    color: #fff; 
    font-size: 10px; 
    font-weight: bold; 
}
.cert-text {
    flex: 1;
    color: #000;
    font-size: 16px;
    font-weight: 600;
}
.paperclip-icon {
    width: 16px;
    height: 16px;
}

.simple-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px 0 8px 16px;
}
.simple-item:last-child {
    margin-bottom: 0;
}
.gray-item {
    padding: 8px 16px 8px 24px;
    margin: 8px 0;
}
.gray-item .checkbox {
    background: #e0e0e0;
    border-color: #bbb;
}

.next-btn { 
    margin: 80px 8px 20px; 
    height: 44px; 
    background: #222; 
    color: #fff; 
    border-radius: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}
</style>
